<template>
    <div class="px-[16px] max-h-[636px] overflow-scroll">
<div class="pb-[12px] item mt-[20px] cursor-pointer" v-for="item in itemList" :key="item.id">
    <image :src="item.url.src" alt="" class="rounded-[2px] w-[236px] h-[110px] mb-[20px] object-cover" />
    <div class="title">{{ item.title }}</div>
    <div class="text-right">
        <span class="float-left text-[10px] text-333">{{ item.date }}</span>
        <a href="" class="text-[12px] text-brown ">阅读全文</a>
    </div>
</div>
</div>
</template>
<script setup>
import news from '@assets/news/news.png';
const itemList =[
{
    url: news,
    id:1,
    title: '荣获“车规级电源类优质供应商”称号',
    date: '2023-10-16'
},
{
    url: news,
    id:1,
    title: '荣获“车规级电源类优质供应商”称号',
    date: '2023-10-16'
},
{
    url: news,
    id:1,
    title: '荣获“车规级电源类优质供应商”称号',
    date: '2023-10-16'
},
{
    url: news,
    id:1,
    title: '荣获“车规级电源类优质供应商”称号',
    date: '2023-10-16'
},
]
</script>
<style lang="scss" scoped>
.title{
opacity: 1;
font-family: Source Han Sans;
font-size: 14px;
font-weight: normal;
line-height: normal;
color: #333333;
	margin-bottom: 22px;
}
.item{
    border-bottom: 1px solid grey;
}

.item:hover{
    border-bottom-color: #722F2F;
    img{
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
    }
    a{
        text-decoration: underline;
    }
}
</style>